<template>
	<div class="operation-container">
		<el-tabs v-model="activeName">
			<el-tab-pane label="运管操作日志" name="operation">
				<Search :searchType="activeName" @searchData="searchData" />
				<Table :tableData="tableData" class="operation-table" @tableRowPropClicked="tableRowPropClicked"> </Table>
				<PageSize class="page" :pages="selectOperationList.pages" @changePageSize="changePageSize" @changeCurrentPage="changeCurrentPage" />
			</el-tab-pane>
		</el-tabs>
		<el-dialog title="导入账号" width="40%" :visible.sync="importAccountData.length > 0" :before-close="() => { importAccountData = [] }">
			<el-table :data="importAccountData" border stripe max-height="400px">
				<el-table-column label="序号" align="center" min-width="30px">
					<template slot-scope="scope">
						<span>{{ scope.$index + 1 }}</span>
					</template>
				</el-table-column>
			  <el-table-column label="用户名" prop="userName" align="center"></el-table-column>
			  <el-table-column label="角色" prop="roleName" align="center"></el-table-column>
			</el-table>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="importAccountData = []">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="导入分组" width="30%" :visible.sync="importGroupData.length > 0" :before-close="() => { importGroupData = [] }">
			<el-table :data="importGroupData" border stripe max-height="400px">
			  <el-table-column label="序号" align="center" min-width="30px">
				<template slot-scope="scope">
					<span>{{ scope.$index + 1 }}</span>
				</template>
			  </el-table-column>
			  <el-table-column label="分组名" prop="name" align="center"></el-table-column>
			</el-table>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="importGroupData = []">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
import Search from './components/Search.vue';
import Table from '@/views/components/Table.vue';
import PageSize from '@/views/components/PageSize.vue';
import { getOperationLogList } from '@/api/api';
export default {
	name: 'APP',
	components: {
		Search,
		Table,
		PageSize
	},
	data() {
		return {
			selectOperationList: {
				type: '',
				startTime: '',
				endTime: '',
				userName: '',
				pages: { page: 1, pageSize: 10, total: 0 }
			},
			activeName: 'operation',
			tableData: {
				sort: false,
				tableHead: [
					{
						label: '操作时间',
						prop: 'time'
					},
					{
						label: '操作类型',
						prop: 'type'
					},
					{
						label: '操作人',
						prop: 'userName'
					},
					{
						label: '操作内容',
						prop: 'content'
					}
				],
				tableConent: [], //运营操作数据
				showIndex: false,
				showCheck: false,
				stripe: false
			},
			originTableData: [],
			importAccountData: [],
			importGroupData: []
		};
	},
	methods: {
		tableRowPropClicked(prop, scope) {
			console.log('clickProp:',prop, scope.$index);
			if (prop === 'content') {
				let category = this.originTableData[scope.$index].category;
				if (category === 'bulkCreateGroup') {
					this.importGroupData = this.originTableData[scope.$index].data;
				} else if (category === 'bulkCreateAccount') {
					this.importAccountData = this.originTableData[scope.$index].data;
				}
			}
		},
		async getOperationLogData() {
			const params = {
				type: this.selectOperationList.type,
				userName: this.selectOperationList.userName,
				startTime: this.selectOperationList.startTime,
				endTime: this.selectOperationList.endTime,
				page: this.selectOperationList.pages.page,
				pageSize: this.selectOperationList.pages.pageSize
			};
			try {
				const { data } = await getOperationLogList(params);
				console.log(data, 'getOperationLogList result');
				if (data.code === 200) {
					this.selectOperationList.pages.total = data.message.count;
					this.originTableData = data.message.data;
					this.tableData.tableConent = data.message.data.map(item => {
						return {
							time: item.updatedAt ? this.$moment(item.updatedAt).format('YYYY-MM-DD HH:mm:ss') : '- -',
							type: this.filterOperationType(item.type),
							userName: item.userName ? item.userName : '- -',
							content: item.content || '- -',
							clickableProps: [
								{clickType: 'text', clickProp: item.category === 'bulkCreateGroup' ? 'content' : undefined},
								{clickType: 'text', clickProp: item.category === 'bulkCreateAccount' ? 'content' : undefined},
							]
						};
					});
				} else {
					this.$message.error('获取运营操作日志失败');
				}
			} catch (error) {
				console.log(error);
				this.$requestApiError(error, () => {
					this.$router.push('/');
				});
			}
		},

		filterOperationType(type) {
			if (type === 1) {
				return '运营管理';
			} else if (type === 0) {
				return '登入/登出';
			}
			return '- -';
		},

		searchData(data) {
			console.log('operation search data', data);
			const { operationName, operationType, endTime, startTime } = data;
			this.selectOperationList.userName = operationName;
			this.selectOperationList.type = operationType;
			this.selectOperationList.endTime = endTime;
			this.selectOperationList.startTime = startTime;
			this.selectOperationList.pages.page = 1;
			this.selectOperationList.pages.pageSize = 10;
			this.getOperationLogData();
		},
		changePageSize(val) {
			this.selectOperationList.pages.pageSize = val;
			this.selectOperationList.pages.page = 1;
			this.getOperationLogData();
		},
		changeCurrentPage(val) {
			this.selectOperationList.pages.page = val;
			this.getOperationLogData();
		}
	},
	created() {},
	mounted() {
		this.getOperationLogData();
	}
};
</script>
<style scoped lang="less">
.operation-container {
	.page {
		margin-top: 15px;
	}
}
</style>

<style lang="less">
.operation-table {
	.el-table__header {
		tr {
			th {
				background: #f8f8f9 !important;
			}
		}
	}
}
</style>
